<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a-button type="primary" @click="changeAntTheme('#992777')" ghost>默认</a-button>
    <a-button type="primary" @click="changeAntTheme('#F5222D')">薄暮</a-button>
    <a-button type="primary" @click="changeAntTheme('#FA541C')">火山</a-button>
    <a-button type="primary" @click="changeAntTheme('#FAAD14')">日暮</a-button>
    <a-button type="primary" @click="changeAntTheme('#13C2C2')">明青</a-button>
    <a-button type="primary" @click="changeAntTheme('#52C41A')"
      >极光绿</a-button
    >
    <a-button type="primary" @click="changeAntTheme('#1890FF')"
      >拂晓蓝</a-button
    >
    <a-button type="primary" @click="changeAntTheme('#2F54EB')"
      >极客蓝</a-button
    >
    <a-button type="primary" @click="changeAntTheme('#722ED1')">酱紫</a-button>
    <p class="mt-2">
      <a-button type="primary" @click="changeThemeBtn('light')"> 明亮</a-button>
      <a-button type="primary" @click="changeThemeBtn('blue')"> 蓝色</a-button>
      <a-button type="primary" @click="changeThemeBtn('dark')"> 暗黑</a-button>
    </p>
  </div>
</template>

<script>
import { changeTheme } from "../styles/index.js";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },

  methods: {
    changeAntTheme(primaryColor) {
      window.less.modifyVars({
        "@primary-color": primaryColor,
      });
      document.body.style.setProperty("--bg", primaryColor);
    },

    changeThemeBtn(theme) {
      changeTheme(theme);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
